<template>
  <!--商品分类列表页-->
  <div class="goods_list_temp w1200">
    <div class="breadcrumb">
      <el-breadcrumb>
        <el-breadcrumb-item separator="/">首页</el-breadcrumb-item>
        <el-breadcrumb-item v-if="false"
          ><em style="color: #ca151e">搜索 "商品" 结果列表</em></el-breadcrumb-item
        >
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 搜索条件 S -->
    <div class="goods_where w1200">
      <div class="item">
        <div class="title">商品分类：</div>
        <div class="list">
          <div class="first">
            <ul>
              <li
                :class="data.base64Decode.pid == null || data.base64Decode.pid == 0 ? 'red' : ''"
                @click="classChange(0, {}, 3)"
              >
                全部
              </li>
              <li
                :class="data.base64Decode.pid != null && data.base64Decode.pid == v.id ? 'red' : ''"
                v-for="(v, k) in twoCategoryList"
                :key="k"
                @click="classChange(v.id, v)"
              >
                {{ v.name }}
              </li>
            </ul>
          </div>
          <div class="sec" v-for="(v, k) in twoCategoryList" :key="k">
            <ul v-if="data.base64Decode.pid != null && data.base64Decode.pid == v.id">
              <li
                :class="
                  data.base64Decode.sid != null && data.base64Decode.sid == vo.id ? 'red' : ''
                "
                v-for="(vo, key) in v.children"
                @click="classChange(v.id, vo, 1)"
                :key="key"
              >
                {{ vo.name }}
              </li>
            </ul>
            <div v-if="data.base64Decode.pid != null && data.base64Decode.pid == v.id">
              <div v-for="(vo, key) in v.children" :key="key">
                <ul
                  style="margin-top: 0"
                  v-if="data.base64Decode.sid != null && data.base64Decode.sid == vo.id"
                >
                  <li
                    :class="
                      data.base64Decode.tid != null && data.base64Decode.tid == voo.id ? 'red' : ''
                    "
                    v-for="(voo, keys) in vo.children"
                    :key="keys"
                    @click="classChange(v.id, voo, 2, vo.id)"
                  >
                    {{ voo.name }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="title">品牌筛选：</div>
        <div class="list">
          <div class="first">
            <ul>
              <li
                :class="
                  data.base64Decode.brand_id == null || data.base64Decode.brand_id == 0 ? 'red' : ''
                "
                @click="brandChange(0)"
              >
                全部
              </li>
              <li
                :class="
                  data.base64Decode.brand_id != null && data.base64Decode.brand_id == v.id
                    ? 'red'
                    : ''
                "
                v-for="(v, k) in allBrandList"
                :key="k"
                @click="brandChange(v.id)"
              >
                {{ v.name }}
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="title">筛选排序：</div>
        <div class="list">
          <div class="other">
            <ul>
              <li
                @click="sortChange('')"
                :class="
                  data.base64Decode.sort_type == null || data.base64Decode.sort_type == ''
                    ? 'red'
                    : ''
                "
              >
                默认
                <div class="sorts">
                  <el-icon
                    :class="
                      (data.base64Decode.sort_order == null ||
                        data.base64Decode.sort_order == 'asc') &&
                      (data.base64Decode.sort_type == null || data.base64Decode.sort_type == '')
                        ? 'caret red'
                        : 'caret'
                    "
                    type="caret-up"
                  >
                    <CaretTop />
                  </el-icon>
                  <el-icon
                    :class="
                      data.base64Decode.sort_order != null &&
                      data.base64Decode.sort_order == 'desc' &&
                      (data.base64Decode.sort_type == null || data.base64Decode.sort_type == '')
                        ? 'caret red'
                        : 'caret'
                    "
                    type="caret-down"
                  >
                    <CaretBottom />
                  </el-icon>
                </div>
              </li>
              <li
                @click="sortChange('goods_price')"
                :class="
                  data.base64Decode.sort_type != null &&
                  data.base64Decode.sort_type == 'goods_price'
                    ? 'red'
                    : ''
                "
              >
                价格
                <div class="sorts">
                  <el-icon
                    :class="
                      data.base64Decode.sort_order != null &&
                      data.base64Decode.sort_order == 'asc' &&
                      data.base64Decode.sort_type != null &&
                      data.base64Decode.sort_type == 'goods_price'
                        ? 'caret red'
                        : 'caret'
                    "
                    type="caret-up"
                  >
                    <CaretTop />
                  </el-icon>
                  <el-icon
                    :class="
                      data.base64Decode.sort_order != null &&
                      data.base64Decode.sort_order == 'desc' &&
                      data.base64Decode.sort_type != null &&
                      data.base64Decode.sort_type == 'goods_price'
                        ? 'caret red'
                        : 'caret'
                    "
                    type="caret-down"
                  >
                    <CaretBottom />
                  </el-icon>
                </div>
              </li>
              <li
                @click="sortChange('goods_sale')"
                :class="
                  data.base64Decode.sort_type != null && data.base64Decode.sort_type == 'goods_sale'
                    ? 'red'
                    : ''
                "
              >
                销量
                <div class="sorts">
                  <el-icon
                    :class="
                      data.base64Decode.sort_order != null &&
                      data.base64Decode.sort_order == 'asc' &&
                      data.base64Decode.sort_type != null &&
                      data.base64Decode.sort_type == 'goods_sale'
                        ? 'caret red'
                        : 'caret'
                    "
                    type="caret-up"
                  >
                    <CaretTop />
                  </el-icon>
                  <el-icon
                    :class="
                      data.base64Decode.sort_order != null &&
                      data.base64Decode.sort_order == 'desc' &&
                      data.base64Decode.sort_type != null &&
                      data.base64Decode.sort_type == 'goods_sale'
                        ? 'caret red'
                        : 'caret'
                    "
                    type="caret-down"
                  >
                    <CaretBottom />
                  </el-icon>
                </div>
              </li>
              <li
                @click="sortChange('order_comment_count')"
                :class="
                  data.base64Decode.sort_type != null &&
                  data.base64Decode.sort_type == 'order_comment_count'
                    ? 'red'
                    : ''
                "
              >
                评论
                <div class="sorts">
                  <el-icon
                    :class="
                      data.base64Decode.sort_order != null &&
                      data.base64Decode.sort_order == 'asc' &&
                      data.base64Decode.sort_type != null &&
                      data.base64Decode.sort_type == 'order_comment_count'
                        ? 'caret red'
                        : 'caret'
                    "
                  >
                    <CaretTop />
                  </el-icon>
                  <el-icon
                    :class="
                      data.base64Decode.sort_order != null &&
                      data.base64Decode.sort_order == 'desc' &&
                      data.base64Decode.sort_type != null &&
                      data.base64Decode.sort_type == 'order_comment_count'
                        ? 'caret red'
                        : 'caret'
                    "
                  >
                    <CaretBottom />
                  </el-icon>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!--TODO 搜索条件 E -->

    <div class="s_goods_content w1200 home" v-if="true">
      <!-- 产品列表 S -->
      <div class="s_goods_list">
        <div class="item" v-for="(v, k) in goodsList" :key="k">
          <dl>
            <router-link :to="`/home/goods/detail/${v.id}`">
              <dt>
                <!--                <el-image class="el_image" lazy :src="v.imgUrl" alt="" />-->
                <el-image class="el_image" lazy :src="getFirstImageUrl(v.imgUrl)" alt="" />
              </dt>
              <dd class="title">{{ v.name }}</dd>
              <dd class="price">￥{{ v.price }}</dd>
              <dd>
                <span>立即购买</span>
                <span>{{ v.sale }} 人评论</span>
              </dd>
            </router-link>
          </dl>
        </div>
        <div class="clear"></div>
      </div>

      <!--分页-->
      <div class="fy">
        <!--        <el-pagination-->
        <!--          v-model:current-page="queryParams.pageNum"-->
        <!--          v-model:page-size="queryParams.pageSize"-->
        <!--          :size="size"-->
        <!--          :disabled="disabled"-->
        <!--          :background="background"-->
        <!--          layout="prev, pager, next, jumper"-->
        <!--          :total="data.total"-->
        <!--          @size-change="getGoodsList"-->
        <!--          @current-change="getGoodsList"-->
        <!--        />-->
        <el-pagination
          v-model:current-page="queryParams.pageNum"
          v-model:page-size="queryParams.pageSize"
          background
          layout="prev, pager, next"
          :total="data.total"
          @current-change="getGoodsList"
        />
      </div>
    </div>
    <el-empty style="margin-top: 40px" v-else />
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import type { MallGoodsVO } from '@/api/home/mallGoods/types';
import { getGoodsListApi } from '@/api/home/mallGoods';
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
import { useCategoryStore } from '@/store';
import { towListApi } from '@/api/home/goodsCategory';
import { listBrandApi } from '@/api/home/goodsBrand';
import type { GoodsBrandVO } from '@/api/home/goodsBrand/types';
import { CaretTop, CaretBottom } from '@element-plus/icons-vue';
import type { GoodsCategoryVO } from '@/api/home/goodsCategory/types';
import type { ComponentSize } from 'element-plus';

const categoryStore = useCategoryStore();
const goodsList = ref<MallGoodsVO[]>([]);
const allBrandList = ref<GoodsBrandVO[]>([]);
const route = useRoute();
const router = useRouter();
const data = reactive<any>({
  base64Code: '',
  base64Decode: {},
  total: undefined,
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    cate1Id: route.params.id,
    cate2Id: undefined,
    cate3Id: undefined,
    price: undefined,
    sale: undefined,
    collect: undefined,
    brandId: undefined
  }
});
const { queryParams } = toRefs(data);
const getGoodsList = async () => {
  const res: any = await getGoodsListApi(queryParams.value);
  console.log(res);
  data.total = res.total;
  goodsList.value = res.rows;
};
/*根据一级分类查询二级分类*/
const twoCategoryList = ref<any>([]);
const getTwoCategoryList = async (id = route.params.id) => {
  const res = await towListApi(id);
  console.log(res);
  twoCategoryList.value = res.data;
};
/*获取所有品牌*/
const getAllBrand = async () => {
  const res = await listBrandApi();
  console.log(res);
  allBrandList.value = res.rows;
};
//监听路由变化
onBeforeRouteUpdate((to) => {
  queryParams.value.cate1Id = to.params.id;
  getTwoCategoryList(to.params.id);
});

/*改变分类*/

const classChange = (pid: number, info: any, deep = 0, sid = 0) => {
  console.log('deep:', deep);
  data.base64Decode.class_id = [];
  data.base64Decode.pid = pid;
  if (deep == 0) {
    //查询2级分类所属商品
    queryParams.value.cate2Id = info.id;
    getGoodsList();
    info.children.forEach((item) => {
      if (item.children != null) {
        item.children.forEach((item2) => {
          data.base64Decode.class_id.push(item2.id);
          console.log('item2:', item2);
        });
      }
    });
    data.base64Decode.sid = undefined;
    data.base64Decode.tid = undefined;
  }
  if (deep == 1) {
    data.base64Decode.sid = info.id;
    console.log('info:', info.id);
    //查询3级分类所属商品
    queryParams.value.cate3Id = info.id;
    getGoodsList();
    if (info.children != null) {
      info.children.forEach((item) => {
        data.base64Decode.class_id.push(item.id);
      });
    } else {
      data.base64Decode.class_id = [0];
    }
    data.base64Decode.tid = undefined;
  }
  if (deep == 2) {
    data.base64Decode.sid = info.pid;
    data.base64Decode.tid = info.id;
    data.base64Decode.class_id.push(info.id);
  }
  if (deep == 3) {
    console.log('info:', info.id);
    //选择全部时获取所有商品
    queryParams.value.pageNum = 1;
    queryParams.value.pageSize = 5;
    queryParams.value.cate1Id = route.params.id;
    queryParams.value.cate2Id = undefined;
    queryParams.value.cate3Id = undefined;
    queryParams.value.price = undefined;
    queryParams.value.collect = undefined;
    queryParams.value.brandId = undefined;
    // queryParams.value={}
    getGoodsList();
    data.base64Decode.pid = undefined;
    data.base64Decode.tid = undefined;
    data.base64Decode.tid = undefined;
    data.base64Decode.class_id = undefined;
  }
  // router.push('/s/' + window.btoa(JSON.stringify(data.base64Decode)))
};
/*品牌改变*/
const brandChange = (e: number) => {
  data.base64Decode.brand_id = e;
  if (e > 0) {
    queryParams.value.brandId = e;
  } else {
    queryParams.value.brandId = undefined;
  }
  getGoodsList();
  // router.push('/s/' + window.btoa(JSON.stringify(data.base64Decode)))
};
/*改变排序*/
const sortChange = (e = '') => {
  if (e == '') {
    if (data.base64Decode.sort_order == 'desc') {
      data.base64Decode.sort_order = 'asc';
    } else {
      data.base64Decode.sort_order = 'desc';
    }
    if (data.base64Decode.sort_type != undefined) {
      data.base64Decode.sort_order = 'asc';
    }
    data.base64Decode.sort_type = undefined;
  } else {
    if (data.base64Decode.sort_type == undefined || data.base64Decode.sort_type != e) {
      data.base64Decode.sort_order = 'asc';
    } else {
      if (data.base64Decode.sort_order == 'desc') {
        data.base64Decode.sort_order = 'asc';
      } else {
        data.base64Decode.sort_order = 'desc';
      }
    }

    data.base64Decode.sort_type = e;
    // console.log(this.base64Decode.sort_type)
  }
  // router.push('/s/'+window.btoa(JSON.stringify(data.base64Decode)))
};
/*取第一张图片*/
const getFirstImageUrl = (imageUrls: string) => {
  const image = imageUrls.split(',');
  return image.length > 0 ? image[0] : '@/assets/images/none.png';
};

/*周期函数*/
onMounted(() => {
  getGoodsList();
  getTwoCategoryList();
  getAllBrand();
});
</script>
<style lang="scss" scoped>
.goods_where {
  border: 1px solid #efefef;
  line-height: 50px;
  font-size: 14px;

  .item {
    padding: 0 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #efefef;

    &:last-child {
      border-bottom: none;
    }

    &:after {
      clear: both;
      display: block;
      content: '';
    }

    .title {
      float: left;
      margin-right: 20px;
    }

    .list {
      float: left;

      ul li {
        cursor: pointer;
      }

      .first {
        &:after {
          clear: both;
          display: block;
          content: '';
        }

        &.selected {
          background: red;
        }

        ul li {
          background: #efefef;
          line-height: 30px;
          padding: 0 10px;
          margin-top: 10px;
          text-align: center;
          float: left;
          margin-right: 20px;
          border-radius: 3px;

          &:hover {
            color: #fff;
            background-color: #ca151e;
          }

          &.red {
            color: #fff;
            background-color: #ca151e;
          }
        }
      }

      .sec {
        ul {
          border-top: 1px dashed #e1e1e1;
          margin-top: 20px;

          &:after {
            clear: both;
            display: block;
            content: '';
          }
        }

        ul li {
          float: left;
          margin-right: 20px;
          padding: 0 10px;
          line-height: 40px;
          color: #666;
          font-size: 12px;

          &:hover {
            color: #ca151e;
          }

          &.red {
            color: #ca151e;
          }
        }

        &:after {
          clear: both;
          display: block;
          content: '';
        }
      }

      .other {
        ul li {
          float: left;
          margin-right: 20px;
          padding: 0 10px;
          position: relative;

          &:hover {
            color: #ca151e;
          }

          &.red {
            color: #ca151e;
          }

          .sorts {
            position: absolute;
            top: 0;
            right: 0;
            color: #666;

            .caret {
              font-size: 12px;
              position: absolute;
              -webkit-transform-origin-x: 0; //缩小后文字居左
              -webkit-transform: scale(0.8); //关键
              &:first-child {
                top: 16px;
                right: -5px;
              }

              &:last-child {
                top: 22px;
                right: -5px;
              }

              &.red {
                color: #ca151e;
              }
            }
          }
        }
      }
    }
  }
}

.home .s_goods_list {
  margin-top: 40px;
  margin-bottom: 30px;
}

.home .s_goods_list .item {
  float: left;
  width: 224px;
  height: 364px;
  box-sizing: border-box;
  margin: 0 20px 20px 0;

  &:nth-child(5n) {
    margin-right: 0;
  }
}

.home .s_goods_list .item dl {
  border: 1px solid #efefef;
  box-sizing: border-box;
  width: 224px;
  height: 364px;
  transition: all 0.2s linear;
}

.home .s_goods_list .item dl dt {
  padding-top: 26px;
  padding-bottom: 26px;
  text-align: center;
}

.home .s_goods_list .item:hover dl {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-top: -3px;
}

.home .s_goods_list .item dl dd.title {
  color: #000;
  height: 38px;
  text-align: center;
  padding: 0 15px;
  overflow: hidden;
}

.home .s_goods_list .item dl dd.price {
  color: #e01d20;
  line-height: 50px;
  text-align: center;
  padding: 0 15px;
  font-size: 20px;
  overflow: hidden;
}

.home .s_goods_list .item dl dd.price font {
  color: #999;
  font-size: 12px;
}

.home .s_goods_list .item dl dd span {
  width: 50%;
  display: block;
  border-top: 1px solid #efefef;
  float: left;
  line-height: 41px;
  text-align: center;
}

.home .s_goods_list .item dl dd span.integral {
  width: 100%;
  display: block;
  border-top: 1px solid #efefef;
  float: left;
  line-height: 41px;
  text-align: center;
}

.home .s_goods_list .item dl dd span:first-child {
  box-sizing: border-box;
  border-right: 1px solid #efefef;
}

.home .s_goods_list .item dl dd span:first-child:hover {
  color: #fff;
  background: #ca151e;
}

.home .s_goods_list .item .el_image {
  width: 176px;
  height: 176px;
}

.breadcrumb {
  margin-top: 30px;
  margin-bottom: 30px;
}
</style>
